import { useState, useRef, useEffect } from "react";
import type { RefObject, FC, PropsWithChildren } from "react";
import useMedium from "@/hooks/useMedium";
interface SlideMoveProps {
  elRef: RefObject<HTMLDivElement>;
  sideRef: RefObject<HTMLDivElement>;
  changewidth: boolean;
  style?: string;
  maxWidth?: number;
  minWidth?: number;
  maxHeight?: number;
  minHeight?: number;
}
const SlideMove: FC<PropsWithChildren<SlideMoveProps>> = props => {
  const { Meduinfo } = useMedium();
  const [mouseEnterStyle, setMouseEnterStyle] = useState(" ");
  let startX = 0;
  let startY = 0;
  const mouseRef = useRef<HTMLDivElement>(null);
  function handleMouseEnter() {
    // 鼠标进入时改变样式
    let mouseentertext = " cursor-col-resize";
    if (!props.changewidth) {
      mouseentertext = " cursor-row-resize";
    }
    setMouseEnterStyle(mouseentertext);
  }
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  function handleMouseDown(e: any) {
    startX = e.clientX;
    startY = e.clientY;
    document.addEventListener("mousemove", handleMouseMove);
  }
  function handleMouseMove(e: MouseEvent) {
    // 计算鼠标移动的距离
    const distanceX = e.clientX - startX;
    const distanceY = e.clientY - startY;
    if (props.changewidth) {
      const width = mouseRef.current!.getBoundingClientRect().width + distanceX;
      if (
        props.maxWidth &&
        props.minWidth &&
        (width > props.maxWidth || width < props.minWidth)
      ) {
        handleMouseUp();
        return;
      }
      const pWdith = props.elRef.current!.getBoundingClientRect().width;
      mouseRef.current!.style.width = `${width}px`;
      props.sideRef.current!.style.width = `${pWdith - width}px`;
    } else {
      const height =
        mouseRef.current!.getBoundingClientRect().height - distanceY;
      if (
        props.maxHeight &&
        props.minHeight &&
        (height > props?.maxHeight || height < props?.minHeight)
      ) {
        handleMouseUp();
        return;
      }
      const pheight = props.elRef.current!.getBoundingClientRect().height;
      mouseRef.current!.style.height = `${height}px`;
      props.sideRef.current!.style.height = `${pheight - height}px`;
    }
    startX = startX + distanceX;
    startY = startY + distanceY;
  }
  function handleMouseUp() {
    document.removeEventListener("mousemove", handleMouseMove);
  }
  useEffect(() => {
    if (Meduinfo.ismobile || Meduinfo.windowWdith < 640) {
      if (props.changewidth) {
        mouseRef.current!.style.width = "";
      }
    }
  }, [Meduinfo.ismobile, Meduinfo.windowWdith, props.changewidth]);
  return (
    <div
      className={
        "relative flex" + (mouseEnterStyle ?? "") + " " + (props.style ?? "")
      }
      ref={mouseRef}
      onMouseOver={handleMouseEnter}
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
    >
      {props.children}
    </div>
  );
};
export default SlideMove;
